<template>
  <div>
    <VolBox
      :lazy="true"
      :model.sync="model"
      title="选择"
      :height="400"
      :width="800"
      :padding="15"
    >
      <VolHeader
        icon="md-apps"
        text=""
        style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      >
        <div slot="content"></div>
        <slot>
          <div class="header_box" style="display: flex">
            <div class="header_form">
              <VolForm
                ref="myform"
                :loadKey="loadKey"
                :formFileds="formFileds"
                :formRules="formRules"
                :label="100"
              ></VolForm>
            </div>
            <div class="header_btn">
              <Button
                type="info"
                ghost
                @click="searchClick()"
                style="margin-left: 20px"
                >查询</Button
              >
              <!-- <Button
                type="info"
                ghost
                @click="resetSearch"
                style="margin-left: 20px"
                >重置</Button
              > -->
            </div>
          </div>
        </slot>
      </VolHeader>

      <!-- table数据 -->
      <!-- :max-height="450" -->
      <vol-table
        ref="table"
        :loadKey="true"
        :columns="columns"
        :height="300"
        :index="true"
        :click-edit="true"
        :tableData="tableData"
        :paginationHide="true"
        :columnIndex="false"
        :ck="false"
      ></vol-table>
      <div slot="footer">
        <Button type="success" @click="getFirstRow">保存</Button>
        <Button type="info" @click="close">关闭</Button>
      </div>
    </VolBox>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      type: "",
      goodName: "",
      // 查询表单
      loadKey: true,
      formFileds: {
        type: [],
        goodName: "",
      },
      formRules: [
        [
          {
            dataKey: "tree_protype",
            data: [],
            orginData: [],
            title: "产品类型",
            colSize: 6,
            field: "type",
            type: "cascader",
            changeOnSelect: true,
          },
          {
            title: "名称",
            field: "goodName",
            colSize: 6,
            type: "text",
          },
        ],
      ],
      //   表格
      //   isSingle: true,
      tableData: [],
      columns: [
        {
          title: "",
          width: 20,
          align: "left",
          render: (h, { row, column, index }) => {
            return h("el-checkbox", {
              props: {
                value: row.check,
                label: "",
              },
              on: {
                input: (value) => {
                  console.log("2", value);
                  console.log("3", row.check);

                  row.check = value;
                },
                change: (value) => {
                  this.handleClick(value);
                },
              },
            });
          },
        },
        {
          field: "goodid",
          title: "产品id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true,
          sortable: true,
        },
        {
          field: "goodName",
          title: "产品名称",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "goodCode",
          title: "产品编码",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "price",
          title: "成本价",
          type: "decimal",
          width: 80,
          align: "left",
        },
      ],
      //   弹框
      model: false,
    };
  },
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
    VolHeader: () => import("@/components/basic/VolHeader.vue"),
    VolTable: () => import("@/components/basic/VolTable.vue"),
    VolForm: () => import("@/components/basic/VolForm.vue"),
  },
  created() {
    //   级联数据显示
    this.http
      .post("/api/Dictionary/GetVueDictionary", ["tree_protype"])
      .then((res) => {
        // console.log(res[0].data);
        res[0].data.forEach((i) => {
          i.label = i.value;
        });
        this.formRules.forEach((i) => {
          i.forEach((x) => {
            if (x.field == "type") {
              x.data.push(
                ...this.base.convertTree(
                  JSON.parse(JSON.stringify(res[0].data)),
                  (node, data, isRoot) => {
                    node.label = node.value;
                    node.value = node.key;
                  }
                )
              );
              x.orginData.push(...res[0].data);
            }
          });
        });
      });
  },
  methods: {
    // 监听多选框
    handleClick(value) {
      console.log(1, value);
    },
    // 打开弹框
    open(code) {
      this.model = true;
      //   this.list = [];
      //   this.formFileds.type = [];
      //   this.formFileds.goodName = "";
      this.searchClick(code);
    },
    // rowClick({ row, column, event }) {
    //   console.log("点击");
    //   //   this.$refs.table.$refs.table.toggleRowSelection(row);
    // },
    //查询按钮
    searchClick(code) {
      let type;
      if (this.formFileds.type.length != 0) {
        type = this.formFileds.type[this.formFileds.type.length - 1];
      } else {
        type = "";
      }
      this.list = [];
      console.log("code", code);
      if (code) {
        this.tableData = code;
        this.tableData.forEach((item) => {
          this.list.push(item.goodid);
        });
      } else {
        this.tableData.forEach((item) => {
          if (item.check) {
            console.log("进来");
            this.list.push(item.goodid);
          }
        });
      }

      console.log("选项", this.formFileds);
      console.log("现在数据", this.tableData, this.list);

      let params = {
        page: 1, //分页页数(可不填)
        rows: 30, //分页大小(可不填)
        sort: "", //可不填
        order: "", //可不填
        value: this.list, //选中的数据
        wheres: [
          { name: "type", value: type },
          {
            name: "goodName",
            value: this.formFileds.goodName,
            displayType: "like",
          },
        ], // 查询条件(可不填)
      };
      params.value = params.value.join(",");
      params.wheres = JSON.stringify(params.wheres);
      this.http.post("/api/PackageProducts/GetGoods", params).then((res) => {
        res.data.forEach((item) => {
          if (item.check == 1) {
            item.check = true;
          } else {
            item.check = false;
          }
        });
        this.tableData = res.data;
      });
    },
    // 保存按钮
    getFirstRow() {
      let that = this.$store.getters.data().reportPrice;
      let list = [];
      this.tableData.forEach((item) => {
        if (item.check) {
          list.push(item);
        }
      });
      that.$refs.modelFooter.ticketTableData = list;
      this.searchClick();
      this.model = false;
    },
    // 关闭按钮
    close() {
      this.model = false;
    },
    //重置按钮
    resetSearch() {
      this.formFileds.type = [];
      this.formFileds.goodName = "";
      this.tableData = [];
      this.searchClick();
    },
  },
};
</script>
<style lang="less" scoped>
.el-cascader {
  line-height: 32px !important;
}
.el-input__inner {
  height: 32px !important;
}
</style>